<template>
  <view>
    <view class="title">
      <view class="label">总金额</view>
      <view class="num">{{ userInfo ? userInfo.wage : 0 }}</view>
      <view class="btn" @click="handleWithdrawalClick">提现</view>
    </view>

    <view class="title-2">
      <view class="item">
        <view class="title">总业绩</view>
        <view class="num">{{ userInfo ? userInfo.yeji : 0 }}</view>
      </view>
      <view class="item">
        <view class="title">总提成</view>
        <view class="num">{{ userInfo ? userInfo.ticheng : 0 }}</view>
      </view>
    </view>
    <view class="list-title">业绩详情</view>
    <view class="list">

      <view class="item" v-for="(item,i) in list" :key="i">

        <view class="left">
          <view class="message text-cut2">{{ item.goodsName }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
        <view class="right">{{ item.totalMoney }}</view>

      </view>

      <list-loading v-if="loading"/>
      <list-empty v-if="!loading && (!list || list.length == 0)"/>
      <list-load-over v-else-if=" loadOver"/>

    </view>

  </view>
</template>

<script>
import Api from "@/utils/Api";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";

export default {
  components: {ListLoadOver, ListEmpty, ListLoading},
  name: "technician-wages",
  data() {
    return {
      list: [],
      page: 0,
      loading: false,
      loadOver: false,
      userInfo: null,
    }
  },
  methods: {
    handleWithdrawalClick() {
      uni.navigateTo({url: `/pages/index/my/technician/withdrawal/index/index`})
    },
    refresh() {
      this.clear();
      this.getList();
      this.req.getUserInfoCacheCheckMobile().then(res => {
        this.userInfo = res
      })
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      Api.getTechnicianWages(++this.page).then(res => {
        this.list.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.refresh();
  },
  onPullDownRefresh() {
    this.clear();
    this.getList();
  },
  onReachBottom() {
    this.getList();
  },
}
</script>

<style scoped lang='scss'>
.title {
  background-color: white;
  display: flex;
  height: r(100px);
  align-items: center;
  padding: r(0 40px);
  font-size: r(28px);
  color: #333333;

  .num {
    margin: r(0 12px);
  }

  .btn {
    background: #E73832;
    border-radius: r(50px);
    color: white;
    padding: r(5px 25px);
    font-size: r(22px);
  }
}

.title-2 {
  margin-top: r(24px);
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .title {
      font-size: r(34px);
    }
  }
}

.list-title {
  padding: r(24px 40px 24px 40px);
  font-size: r(30px);
  background-color: white;
  font-weight: bold;
  padding-top: r(40px);
}

.list {
  padding-bottom: env(safe-area-inset-bottom);
  background-color: white;

  .item {
    padding: r(20px 40px);
    display: flex;
    font-size: r(28px);
    color: #333333;
    align-items: center;

    .left {
      flex: 1;

      .time {
        font-size: r(24px);
        color: #909090;
      }
    }
  }
}
</style>